<template>
    <div class="tempLoading" v-if="!loadingState">
        <span class="text">正在努力地加载数据中，请稍后</span>
        <span class="animation-wrap">
            <span class="animation-dot"></span>
        </span>
    </div>
</template>

<script>
    export default {
        name: "loadingActing",
        props: {
            loadingState: {
                type: Boolean,
                default: () => {

                    return false

                }
            }
        }
    }
</script>

<style scoped lang="stylus">
    .tempLoading
        position: absolute
        top: 50%
        left: 50%
        margin: auto
        transform: translate(-50%, -50%)
        align-items: baseline
        display: flex
        justify-content: center
        font-size: 14px
        .text
            color: #fff !important
    .animation-wrap
        align-items: center
        display: flex
        justify-content: center
        &::after, &:before, .animation-dot
            content: ""
            animation-duration: 1.5s
            animation-iteration-count: infinite
            animation-name: LOADING
            background: #fff
            border-radius: 50%
            display: block
            height: 5px
            margin: 0 4px
            opacity: 0
            width: 5px
        &::after
            animation-delay: .6s
        .animation-dot
            animation-delay: .3s
    @keyframes LOADING
        0%
            opacity: 0

        50%
            opacity: 1

        to
            opacity: 0
</style>